<template>
  <!-- Begin page -->
  <div id="wrapper">
    <!-- Top Bar Start -->
    <topbar :page_title="page_title"></topbar>
    <!-- Top Bar End -->

    <!-- ========== Left Sidebar Start ========== -->
    <leftsidebar></leftsidebar>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
      <!-- Start content -->
      <div class="content">
        <div class="container">
          <!-- Start uploadbar -->
          <uploadbar @refersh_all_component="refersh_all_component"></uploadbar>
          <component :is="componentId" :transport_data="transport_data"></component>
        </div>
      </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->

    <!-- Right Sidebar -->
    <div class="side-bar right-bar">
      <a href="javascript:void(0);" class="right-bar-toggle">
        <i class="zmdi zmdi-close-circle-o"></i>
      </a>
      <h4 class>Notifications</h4>
      <div class="notification-list nicescroll">
        <ul class="list-group list-no-border user-list">
          <li class="list-group-item">
            <a href="#" class="user-list-item">
              <div class="avatar">
                <img src="/static/assets/images/users/avatar-2.jpg" alt>
              </div>
              <div class="user-desc">
                <span class="name">Michael Zenaty</span>
                <span class="desc">There are new settings available</span>
                <span class="time">2 hours ago</span>
              </div>
            </a>
          </li>
          <li class="list-group-item">
            <a href="#" class="user-list-item">
              <div class="icon bg-info">
                <i class="zmdi zmdi-account"></i>
              </div>
              <div class="user-desc">
                <span class="name">New Signup</span>
                <span class="desc">There are new settings available</span>
                <span class="time">5 hours ago</span>
              </div>
            </a>
          </li>
          <li class="list-group-item">
            <a href="#" class="user-list-item">
              <div class="icon bg-pink">
                <i class="zmdi zmdi-comment"></i>
              </div>
              <div class="user-desc">
                <span class="name">New Message received</span>
                <span class="desc">There are new settings available</span>
                <span class="time">1 day ago</span>
              </div>
            </a>
          </li>
          <li class="list-group-item active">
            <a href="#" class="user-list-item">
              <div class="avatar">
                <img src="/static/assets/images/users/avatar-3.jpg" alt>
              </div>
              <div class="user-desc">
                <span class="name">James Anderson</span>
                <span class="desc">There are new settings available</span>
                <span class="time">2 days ago</span>
              </div>
            </a>
          </li>
          <li class="list-group-item active">
            <a href="#" class="user-list-item">
              <div class="icon bg-warning">
                <i class="zmdi zmdi-settings"></i>
              </div>
              <div class="user-desc">
                <span class="name">Settings</span>
                <span class="desc">There are new settings available</span>
                <span class="time">1 day ago</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- /Right-bar -->
    <footer class="footer text-right">1999 - 2999 © zege.</footer>
  </div>
  <!-- END wrapper -->
</template>


<script>
import Share from "@/components/Content/Share";
import Recently from "@/components/Content/Recently";
import All from "@/components/Content/All";
import Tag from "@/components/Content/Tag";
import axios from "axios";
export default {
  data() {
    return {
      page_title: "", // 页面标题
      componentId: "All", // 动态默认组件
      transport_data: "", // 子组件接收对象
      token: "", // 子组件接收对象
      path_rule: {
        all: "All",
        recently: "Recently",
        share: "Share",
        tag: "Tag"
      }
    };
  },
  components: {
    All: All,
    Share: Share,
    Recently: Recently,
    Tag: Tag
  },
  watch: {
    $route() {
      // console.log(this.$route.params.pathMatch); // 监听路由变化
      var path_ = this.$route.params.pathMatch; // 获取到了通配符匹配到的路径 /share
      var choices_ = this.path_rule[path_];
      if (choices_ == null) {
        return; // 无效路径无需操作
      } else {
        this.componentId = choices_;
        this.page_title = choices_;
      }
      axios({
        url: this.$api + "/api/file/" + path_ + "/",
        withCredentials: true,
      }).then(res => {
        this.transport_data = res.data.data;
        this.token = res.data.token;
      });
    }
  },
  methods: {
    refersh_all_component(value) {
      // console.log("刷新子组件");
      if (this.$route.params.pathMatch == "all") {
        axios({
          url: this.$api + "/api/file/all/",
          withCredentials: true,
        }).then(res => {
          this.transport_data = res.data.data;
          this.token = res.data.token;
        });
      }
    }
  },
  // beforeRouteEnter(to, from, next) {},
  // beforeCreate() {
  //   let token = localStorage.getItem("token");
  //   if (token) {
  //     //访问服务器缓存数据，判断当前token是否失效
  //     let form_data = new FormData()
  //     form_data.append('token', token)
  //     axios({
  //       url: "http://123.57.61.168:8000" + "/api/user/virify/", // 校验token有效期
  //       method: "post",
  //       data: form_data,
  //       withCredentials: true
  //     }).then(res => {
  //       if (res.data.code != 0) {
  //         window.location.href = "/signin";
  //       }
  //     });
  //   } else {
  //     window.location.href = "/signin";
  //   }
  // },
  mounted() {
    var path_ = this.$route.params.pathMatch;
    if (path_ == "") {
      path_ = "all";
    }
    var choices_ = this.path_rule[path_];
    if (choices_ == null) {
      choices_ = "all";
      this.componentId = this.path_rule["all"];
    } else {
      this.page_title = choices_;
      this.componentId = choices_;
    }
    // console.log("请求数据");
    axios({
      url: this.$api + "/api/file/" + path_ + "/",
      withCredentials: true
    }).then(res => {
      // console.log(res);
      this.transport_data = res.data.data;
    });
  }
};
</script>
